.pagination {
  padding: 12px 16px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--separatorColor);
  & > div:first-of-type,& > div:last-of-type  {
    min-width: 94px;
  }
}

.paginationCompressed {
  padding: 8px 16px;
  & > div:first-of-type, & > div:last-of-type {
    min-width: 70px;
  }

  :global(.euiButtonContent .euiIcon) {
    width: 14px;
    height: 14px;
  }
}

.panel {
  padding: 1px 0;
  button:first-of-type {
    border-radius: 3px 3px 0 0;
  }
  button:last-of-type {
    border-radius: 0 0 2px 2px;
  }
}

.popover {
  border: 1px solid var(--euiColorPrimary) !important;
  [class~=euiPopover__panelArrow] {
    &:before {
      border-top-color: var(--euiColorPrimary) !important;
    }
  }
  [class~=euiPopover__panelArrow--bottom] {
    &:before {
      border-bottom-color: var(--euiColorPrimary) !important;
    }
  }
}

.popoverButton {
  text-decoration: underline;
  color: var(--euiTextSubduedColor);
  &:hover, &:focus {
    color: var(--euiTextColor);
  }
  font: normal normal 500 13px/18px Graphik, sans-serif;
}

.pagesItem {
  padding: 4px 16px !important;
  background-color: transparent;
  text-decoration: none !important;
  font: normal normal normal 14px/30px Graphik, sans-serif;
  letter-spacing: 0;
  span {
    color: var(--euiTextSubduedColor);
  }
  &:focus {
    background-color: transparent !important;
  }
  &:hover {
    background-color: var(--hoverInListColorLight) !important;
    span {
      color: inherit;
    }
  }
}

.pagesItemActive, .pagesItemActive:hover, .pagesItemActive:focus {
  background-color: var(--euiColorPrimary) !important;
  cursor: default !important;
  span {
    color: var(--euiColorEmptyShade);
  }
}

.prevPage, .nextPage {
  & > span {
    justify-content: flex-start;
  }
}

.prevPageCompressed {
  & > span {
    padding: 0 12px 0 4px !important;
  }
}
.nextPageCompressed {
  & > span {
    padding: 0 4px 0 12px !important;
  }
}
